<template>
	<view class="tn-width-full">
		<tn-button fontColor="#fff" @click="print" width="100%" :backgroundColor="auth.FPrint==1?'#2074d4':'#aaaaaa'"
			class="print_btn" height="77rpx">{{label}}</tn-button>
		<tn-modal v-model="show" :custom="true">
			<view class="custom-modal-content">
				<view class="title tn-padding-bottom-sm">
					请选择打印机
				</view>
				<view class="tn-icon tn-icon-about-fill"></view>
				<view class="empty" v-if="printlist.length < 1" @click='getPrintList'>
					<image class="image" src="/static/error/common.png" mode="widthFix"></image>
					暂无可用打印机,点击刷新
				</view>
				<view class="print_list">
					<tn-radio-group v-model="print_id" @change="radioGroupChange">
						<tn-radio class="radio" @change="radioChange" v-for="(item, index) in printlist" :key="index"
							:name="item.sn">
							打印机：{{item.name}}
						</tn-radio>
					</tn-radio-group>

				</view>
				<view class="tn-margin-top-sm">
					<tn-button v-if="printlist.length>0" width="100%" height="40px"
						:backgroundColor="!this.print_id?'#999999':'#2074d4'" fontColor="#ffffff"
						@click="select">确认</tn-button>

					<tn-button v-if="printlist.length<1" width="100%" height="40px" backgroundColor="#2074d4"
						fontColor="#ffffff" @click="add">添加打印机</tn-button>
				</view>

			</view>
		</tn-modal>
	</view>

</template>

<script>
	export default {
		name: "PrintBtn",
		data() {
			return {
				// auth: this.$storage.getStorageSync('FItemId'),
				show: false,
				FItemId: '',
				printlist: this.$storage.getStorageSync('printlist'),
				print_id: this.$storage.getStorageSync('print_id') || this.$storage.getStorageSync('printlist')[0] && this
					.$storage.getStorageSync('printlist')[0].sn,
				title: '提示信息',
				content: '提示信息的内容',
				button: [{
						text: '取消',
						backgroundColor: '#E6E6E6',
						fontColor: '#FFFFFF',
						plain: true,
						shape: 'round'
					},
					{
						text: '确定',
						backgroundColor: 'tn-bg-indigo',
						fontColor: '#FFFFFF'
					}
				]
			};
		},
		props: {
			pdata: {
				type: Object,
				default () {
					return {};
				}
			},
			label: {
				type: String,
				default () {
					return '打印';
				}
			},
			auth: {
				type: Object,
				default () {
					return {};
				}
			}
		},
		computed: {},
		watch: {
			// FItemId: {
			// 	handler(newv, old) {
			// 		this.auth = this.$user.getAuth(newv)
			// 	},
			// 	immediate: true,
			// }
		},

		methods: {
			select() {

				if (!this.print_id) {
					uni.showToast({
						icon: 'none',
						title: '请选择打印机'
					})
					return
				}
				this.Goprint()
			},
			flush() {

				// = this.$storage.getStorageSync('printlist')
			},
			print(e) {
				console.log('pdata', this.pdata)
				if (this.auth.FPrint != 1) {
					uni.showToast({
						icon: 'none',
						title: '没有权限，请联系管理员'
					})
					return false
				}
				this.show = true;
			},
			Goprint() {
				let that = this;
				that.$request({
					url: that.$api.print.print,
					data: {
						sn: that.print_id,
						pdata: that.pdata
					},
					method: "POST",
				}).then(response => {
					that.show = false;
					console.log(response)
				}).catch((msg) => {
					that.$t.message.toast(msg);
					that.$t.message.closeLoading();
				});
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				console.log(e);
				this.print_id = e;
				this.$storage.setStorageSync('print_id', e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				console.log(e);
			},
			add() {
				uni.navigateTo({
					url: '/mes/print'
				})
			},
			getPrintList() {
				let t = this;
				console.log("获取打印机列表")
				uni.showLoading({
					title: "加载中"
				})
				t.$request({
					url: t.$api.print.list,
					data: {
						limit_page: 1,
						limit_count: 100,
					}
				}).then(response => {
					if (response.code === 0) {
						t.printlist = response.list
						console.log("获取打印机列表")
						uni.showToast({
							icon: 'none',
							title: response.msg || '刷新成功'
						})
					}
				}).catch((msg) => {
					t.$t.message.toast(msg);
					t.$t.message.closeLoading();
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #4b4b4b;
		margin-bottom: 16px;
		border-bottom: 1px solid #dfdfdf;
		font-size: 34upx;
	}

	.print_list {
		height: 260px;
		height: 260px;
		display: flex;
		justify-content: flex-start;
		flex-direction: column;

		.radio {
			margin: 8upx 0;
			padding: 10upx 0;
			border-bottom: 1px solid #d9d9d9;
			width: 100%;
		}
	}

	.empty {
		height: 300px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #888;
		flex-direction: column;

		.image {
			width: 420upx;
			height: 420upx;
		}
	}
</style>